<?php
use yii\bootstrap\ActiveForm;
?>
<link rel="stylesheet" href="../static/dist/css/AdminLTE.min.css" type="text/css">
<link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../static/plugins/datatables/jquery.dataTables.css" type="text/css">
<link rel="stylesheet" href="../static/css/admin.css" type="text/css">
<link rel="stylesheet" href="../static/jBox/Skins/Metro/jbox.css" type="text/css">
<link rel="stylesheet" href="../static/plugins/bootstrap-select/css/bootstrap-select.css" type="text/css">
<link rel="stylesheet" href="../static/plugins/datepicker/datepicker3.css" type="text/css">
<link rel="stylesheet" href="../static/plugins/daterangepicker/daterangepicker.css" type="text/css">
<style>
    .dataTable>tbody>tr>td {
        vertical-align: middle;
        font-size: 0.8em;
        padding: 8px 18px;
    }
    .dataTable>thead>tr>th {
        vertical-align: middle;
        font-size: 0.8em;
    }
    .examine-content .input-group {
        margin-bottom: 20px;
        height: 30px ;
        line-height: 30px;
    }
    .examine-content button{
        margin: 10px;
    }
    #table_id_example th, td {
        white-space: nowrap;
    }
    .col-md-12 div,label{ padding: 5px }
</style>
<div class="tabs-panel">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    名称：<input class="depart-input" id="searchName" style="width: 160px" type="text">&nbsp;
                    <button type="button" class="btn btn-primary depart-modal" id="select_button" style="width: 80px;">查询</button>&nbsp;
                    <button type="button" class="btn btn-warning depart-modal" id="reset_button" style="width: 80px;">重置</button>
                </div>
                <div class="box-body">
                    <a type="button" class="btn btn-success depart-modal" id="add-btn" style="width: 80px;">添加</a>
                    <table id="table_id_example" class="display">
                        <thead>
                        <tr>
                            <th style="width: 25%">ID</th>
                            <th style="width: 25%">名称</th>
                            <th style="width: 25%">排序</th>
                            <th style="width: 25%">状态</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="show-add-modal" style="background: rgba(236, 230, 230, 0.3);" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">详细信息</h4>
            </div>
            <div class="modal-body">
                <div class="box-body">
                    <?php $form = ActiveForm::begin(['id' => 'add_category_form']); ?>
                    <div class="col-md-12">
                        <label class="col-sm-4 control-label">编号</label>
                        <div class="col-sm-6">
                            <input id="id" name="id" type="hidden">
                            <input class="form-control" id="categoryId" name="categoryId">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <label class="col-sm-4 control-label">名称</label>
                        <div class="col-sm-6">
                            <input class="form-control" id="categoryName" name="categoryName">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <label class="col-sm-4 control-label">排序</label>
                        <div class="col-sm-6">
                            <input class="form-control" id="sort" name="sort">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <label class="col-sm-4 control-label">启用/禁用</label>
                        <div class="col-sm-6">
                            <select class="form-control" id="useflg" name="useflg">
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </select>
                        </div>
                    </div>
                    <?php ActiveForm::end() ?>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="add-category-btn">确定</button>
            </div>
        </div>
    </div>
</div>

<!-- 固定js -->
<script type="text/javascript" src="../static/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="../static/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../static/plugins/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../static/plugins/datatables/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="../static/jBox/jquery.jBox-2.3.min.js"></script>
<script type="text/javascript" src="../static/jBox/i18n/jquery.jBox-zh-CN.js"></script>
<script type="text/javascript" src="/static/plugins/treeTable/jquery.treetable.js"></script>
<!-- 自定义js -->
<script type="text/javascript" src="../static/plugins/moment/moment.min.js"></script>
<script type="text/javascript" src="../static/plugins/bootstrap-select/js/bootstrap-select.js"></script>
<script type="text/javascript" src="../static/plugins/bootstrap-select/js/defaults-zh_CN.js"></script>
<script type="text/javascript" src="../static/plugins/daterangepicker/daterangepicker.js"></script>
<script type="text/javascript" src="../static/plugins/datepicker/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="/static/app/global.js?version=<?=Yii::$app->params['version']?>"></script>
<script type="text/javascript">
    var table = null;
    $(function () {

        table = $('#table_id_example').DataTable({
            dom: '<"top">rt<"bottom"flip><"clear">',
            language: {
                "sUrl":'../static/plugins/datatables/language.json'
            },
            "searching": false,
            "ordering": false,
            "serverSide": true,
            ajax:{
                url:'/product/category-list',
                type:'post',
                data:function(d){
                    d.name = $('#searchName').val()
                },
                error:getError
            },
            aoColumns: [
                { "data": "categoryId"},
                { "data": "name"},
                { "data": "sort"},
                { "data": "useflg"},
            ],
            columnDefs: [
                {
                    "targets": [1],
                    "orderable":false,
                    "searchable":false,
                    "render": function(data, type, full) {
                        return '<a name="showDtl" data-id="'+full.AutoId+'">' + data + '</a>';
                    }
                },
                {
                    "targets": [-1],
                    "orderable":false,
                    "searchable":false,
                    "render": function(data, type, full) {
                        return data == 1 ? '启用':'禁用';
                    }
                }
            ]
        });

        $("#select_button").on('click', function () {
            table.ajax.reload();
        });

        //重置
        $("#reset_button").on('click', function () {
            $('#searchName').val('');
            table.ajax.reload();
        });

        //新增model
        $('#add-btn').on('click', function () {
            $('#id').val('');
            $('#categoryId').val('').removeAttr('disabled');
            $('#categoryName').val('');
            $('#sort').val('');
            $('#useflg').val('1');
            $('#show-add-modal').modal('show');
        });

        //详情
        $(document).on('click', 'a[name=showDtl]', function () {
            $.post('/product/category-dtl', { id: $(this).attr('data-id') },
                function (o) {
                    if(o.code == 200){
                        $('#show-add-modal').modal('show');
                        var category = o.data;
                        $('#id').val(category['AutoId']);
                        $('#categoryId').val(category['categoryId']).attr('disabled',true);
                        $('#categoryName').val(category['name']);
                        $('#sort').val(category['sort']);
                        $('#useflg').val(category['useflg']);
                    }
                },
                'json'
            );
        });

        //保存
        $('#add-category-btn').on('click', function ()
        {
            if($('#categoryId').val()==''){
                $.jBox.error('请输入分类编号', '错误');
                return;
            }else if(!$.isNumeric($('#categoryId').val())) {
                $.jBox.error('请输入正确的编号', '错误');
                return false;
            }

            if($('#categoryName').val()==''){
                $.jBox.error('请输入分类名称', '错误');
                return;
            }
            var sort = $('#sort').val();
            if (sort == '') {
                $.jBox.error('请输入排序值', '错误');
                return false;
            } else if(!$.isNumeric(sort)) {
                $.jBox.error('请输入正确的排序值', '错误');
                return false;
            }

            var param = $('#add_category_form').serialize();
            $.post(
                '/product/save-category',
                param,
                function (data) {
                    if(data.code == 200){
                        $.jBox.tip('处理成功', 'success');
                        window.setTimeout(function () {
                            $('#show-add-modal').modal('hide');
                            table.draw(false);
                        }, 1000);
                    }else{
                        $.jBox.error(data.val, '错误');
                    }
                },
                'json'
            );
        });
    });
</script>